<template>
  <el-container class="wrap-box">
    <el-container class="main-box">
      <MenuBox :default-active="routerKey"
               @active="handleActive" />
      <el-container>
        <el-header class="bread-header">
          <Breadcrumb>
            <template slot="right">
              <MessageToDo />
              <Tooltip content="任务中心">
                <BatchResult />
              </Tooltip>
              <Tooltip content="下载中心">
                <FileExport />
              </Tooltip>
              <Tooltip content="帮助中心">
                <HelpCenter />
              </Tooltip>
              <BreadHandle />
            </template>
          </Breadcrumb>
        </el-header>
        <TagsView />
        <el-main>
          <!-- <router-view :key="routerKey" /> -->
          <transition name="slide-fade"
                      mode="out-in">
            <router-view v-if="isRouterAlive"
                         :key="routerKey" />
          </transition>
        </el-main>
      </el-container>
    </el-container>
    <notice-diolog :visible.sync="dialogVisible" />
  </el-container>
</template>

<script>
import MenuBox from "@menu/MenuBox.vue";
import Breadcrumb from "@menu/Breadcrumb.vue";
import BatchResult from "@components/bread/BatchResult.vue";
import FileExport from "@components/bread/FileExport.vue";
import MessageToDo from "@components/bread/MessageToDo.vue";
import BreadHandle from "@/views/breadHandle/Index";
import HelpCenter from "@components/bread/HelpCenter.vue";
import TagsView from '@tagsView/TagsView.vue';
import Tooltip from "@components/basic/Tooltip.vue";
import NoticeDiolog from "@/components/dialog/tableFrame/NoticeDiolog.vue"
// import TableTabs from "@components/table/TableTabs";
import { mapState, mapActions } from "vuex";

export default {
  name: "Home",
  components: {
    MenuBox,
    Breadcrumb,
    BatchResult,
    FileExport,
    BreadHandle,
    MessageToDo,
    TagsView,
    HelpCenter,
    NoticeDiolog,
    Tooltip
  },
  data () {
    return {
      isRouterAlive: true,
      activeMenu: null,
      dialogVisible: false,
      menus: [],
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.login.isLogin,
      unReadNotice: (state) => state.login.unReadNotice
    }),
    routerKey () {
      return this.$route.path
    },
    user () {
      return JSON.parse(this.userInfo)
    }
  },
  created () {
    if (this.isLogin && this.unReadNotice.length) {
      this.dialogVisible = true;
      this.changeLogin(false);
    }
  },
  methods: {
    ...mapActions({
      setTagsview: "tagsView/setTagsview",
      changeLogin: "login/changeLoginFlag"
    }),
    handleActive (menu) {
      this.activeMenu = menu;
      this.setTagsview({ userId: this.user?.userId, tag: menu })
      if (menu.type == 3) {
        this.$router.push("/board/" + menu.menuId)
      } else {
        this.$router.push(menu.url)
      }
    },
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  },
};
</script>

<style scoped>
.main-left {
  height: calc(100vh - 0px);
  overflow-x: hidden !important;
}

.main-content-wrap {
  width: calc(100% - 200px);
}

.scroll_container {
  position: relative;
}

.bread-header {
  height: 50px !important;
  padding: 0px;
}

/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
